<!--
 * @Date: 2024-11-25 11:09:27
 * @Author: LiSong
 * @LastEditors: LiSong
 * @LastEditTime: 2024-12-19 17:26:10
 * @Description: 属性编辑器节点
-->
<template>
  <template v-if="props.config.noForm">
    <component
      :is="pluginManager.attrEditors[config.type]"
      :="{ ...compProps } ?? {}"
      :[`onUpdate:modelValue`]="handleUpdate"
      v-model:['modelValue']="bindValue"
    >
    </component>
  </template>
  <template v-else>
    <el-form-item
      v-if="upProps.display"
      :label="config.label"
    >
      <template #label="{ label }">
        <div>{{ label }}</div>
        <el-tooltip
          v-if="upProps.labelTooltip"
          :content="upProps.labelTooltip"
          effect="dark"
          placement="top"
        >
          <div class="label-tips">
            <el-icon><InfoFilled /></el-icon>
          </div>
        </el-tooltip>
      </template>
      <component
        :is="pluginManager.attrEditors[config.type]"
        :="{ ...compProps, ...upProps } ?? {}"
        v-model:['modelValue']="bindValue"
        :[`onUpdate:modelValue`]="handleUpdate"
      >
      </component>
    </el-form-item>
  </template>
</template>

<script setup>
import { isEmpty } from '@hp/utils/data.js'
import { pluginManager } from '@hp/utils/pluginManager.js'
import { InfoFilled} from '@element-plus/icons-vue'
import { computed, watch, ref, watchEffect, onMounted } from 'vue';

// 定义组件的事件
const emit = defineEmits(['update:modelValue', 'change'])

const props = defineProps({
  // 值对象
  row: { type: Object, default: () => ({}) },
  // 属性配置
  config: { type: Object, default: () => ({}) },
  // 全量数据集
  schema: { type: Object, default: () => ({}) },
  // 额外的属性
  upProps: { type: Object, default: () => ({}) },
  // 绑定的值
  modelValue: {  },
})

const bindValue = ref(null)
const compProps = computed(() => {
  const cfgProps = props.config.compProps
  if (cfgProps && cfgProps.hasOwnProperty('defaultValue') && isEmpty(props.modelValue) ) {
    bindValue.value = cfgProps.defaultValue
  }
  return {
    row: props.row,
    config: props.config,
    schema: props.schema,
    display: true,
    bindModel: 'modelValue',
  }
})

onMounted(() => {
})

watch(
  () => bindValue.value,
  () => {
    if (bindValue === props.modelValue) return
    handleUpdate(bindValue.value)
  }
)
watchEffect(() => {
  bindValue.value = props.modelValue
})
const handleUpdate = (v) => {
  emit('change', v)
  emit('update:modelValue', v)
}

</script>

<style lang="scss" scoped>
.label-tips {
  display: flex;
  align-items: center;
  height: 100%;
  margin-left: 5px;
}
</style>